<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加虚拟设备"
    width="80%"
    :close-on-click-modal="false"
    :before-close="rest"
  >
    <!-- 添加设备 表单 -->
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
      <el-row :gutter="28">
        <!-- 设备名称 -->
        <el-col :span="12">
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="ruleForm.name" clearable @input="WriteName(ruleForm.name)" />
          </el-form-item>
        </el-col>
        <!-- 设备类型 级联选择器 -->
        <el-col :span="12">
          <el-form-item label="设备类型" prop="TaskGroupValue">
            <el-cascader
              style="width: 100%"
              v-model="selectList"
              :options="options"
              @change="selectChange(selectList)"
              :show-all-levels="false"
              placeholder="请选择设备类型"
              :props="{ value: 'DevicetypeValue', label: 'DevicetypeName', checkStrictly: true }"
            />
          </el-form-item>
        </el-col>
        <!-- 虚拟设备 -->
        <!-- 延时器 -->
        <template v-if="ruleForm.property.length">
          <el-col
            ><div style="margin: 2% 0; font-size: 18px; font-weight: 600">
              {{ VirtualValue.DevicetypeName }}
            </div></el-col
          >
          <el-col v-for="(item, index) in VirtualValue.property" :key="index">
            <el-form-item :label="item.propertyName">
              <el-input
                v-if="ruleForm.DevicetypeValue === 1004 && item.propertyName === '计数器'"
                v-model="item.statusval"
              ></el-input>
              <el-input
                placeholder="单位为秒"
                v-else-if="item.propertyName === '定时器时长'"
                v-model="item.statusval"
              ></el-input>
              <el-input v-else v-model="item.statusName" disabled></el-input>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <!-- <el-button @click="dds">BaudRate</el-button> -->
        <el-button @click="rest">取消</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import until from '../../until/csUntil/deviceUtils.js'
import VirtualDeviceJson from '../../MyJson/VirtualDevice.json'
import { v4 as uuidv4 } from 'uuid'
import { ElMessage } from 'element-plus'
export default {
  setup(_, { emit }) {
    // 在组件挂载后获取串口列表
    onMounted(() => {
      const deviceTypeStr = store.state.deviceTypeStr
      const device = JSON.parse(JSON.stringify(deviceTypeStr))
      const filterVirtual = device.children.filter((item) => item.isVirtual === 'IS_VIRTUAL')
      options.value = filterVirtual
    })
    // vuex 实例对象
    const store = useStore()
    // dialog 显示隐藏
    const dialogVisible = ref(false)
    // JSON 字符串
    const VirtualJson = ref(VirtualDeviceJson.template)
    // 设备类型
    const options = ref()
    // dialog 表单
    const ruleForm = ref({
      id: '',
      pid: '-1',
      name: '',
      Channels: -1,
      DevicetypeName: '',
      DevicetypeValue: null,
      isShow: '1',
      amplitude: '0',
      delay: '1',
      BaudRate: 9600,
      property: [],
      pins: [],
      values: [],
      version: '3.0',
      type: 'timer',
      dvcActualId: 'timer',
      isVirtual: 'IS_VIRTUAL',
      ComPort: '',
      DeviceVariable: 'UNAVAILABLE'
    })
    // dialog 检验规则
    const rules = reactive({
      name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }]
    })
    // 表单实例对象
    const ruleFormRef = ref(null)
    // 级联选择器选中的值
    const selectList = ref(null)
    // 虚拟设备 筛选的值
    const VirtualValue = ref(null)

    // 设备类型 select  change 事件
    const selectChange = (data) => {
      // 虚拟设备
      ruleForm.value.DevicetypeValue = data[0]
      const res = until.findDeviceByValue(options.value, ruleForm.value.DevicetypeValue)
      res.values = res.property

      VirtualValue.value = JSON.parse(JSON.stringify(res))
      ruleForm.value.id = uuidv4()
      ruleForm.value.pins = []
      ruleForm.value.property = VirtualValue.value.property
      ruleForm.value.values = VirtualValue.value.property
      ruleForm.value.isShow = VirtualValue.value.isShow
      ruleForm.value.DevicetypeName = VirtualValue.value.DevicetypeName
      ruleForm.value.DevicetypeValue = VirtualValue.value.DevicetypeValue
    }

    // 提交表单
    const submit = () => {
      ruleFormRef.value.validate((validate) => {
        if (validate) {
          ruleForm.value.values = VirtualValue.value.property
          ruleForm.value.property = VirtualValue.value.property
          const insertDvcAndDvcVersion = window.api.insertDvcAndDvcVersion(
            JSON.stringify(ruleForm.value)
          )

          if (insertDvcAndDvcVersion === '新增成功') {
            ElMessage.success('新增成功')
            rest()
            dialogVisible.value = false
            emit('update')
          } else {
            ElMessage.error(insertDvcAndDvcVersion)
          }
        }
      })
    }

    const WriteName = (data) => {
      if (ruleForm.value.DevicetypeValue === 1002) {
        VirtualValue.value.values[0].statusName = data
      }
    }

    const rest = () => {
      ruleForm.value.id = ''
      ruleForm.value.pid = '-1'
      ruleForm.value.name = ''
      ruleForm.value.Channels = -1
      ruleForm.value.DevicetypeName = ''
      ruleForm.value.DevicetypeValue = null
      ruleForm.value.isShow = '1'
      ruleForm.value.amplitude = '0'
      ruleForm.value.delay = '1'
      ruleForm.value.BaudRate = 9600
      ruleForm.value.values = []
      ruleForm.value.property = []
      ruleForm.value.pins = []
      ruleForm.value.version = '3.0'
      ruleForm.value.type = 'timer'
      ruleForm.value.dvcActualId = 'timer'
      ruleForm.value.isVirtual = 'IS_VIRTUAL'
      ruleForm.value.ComPort = ''
      ruleForm.value.String = ''
      dialogVisible.value = false
      selectList.value = null
    }

    // 测试按钮
    const dds = () => {}
    return {
      dialogVisible,
      options,
      ruleForm,
      selectList,
      VirtualValue,
      selectChange,
      ruleFormRef,
      VirtualJson,
      rules,
      submit,
      rest,
      WriteName
    }
  }
}
</script>

<style>
</style>